<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>


<body>
    <div class="flex justify-between w-screen h-screen bg-black">
        <!-- 左 -->
        <div class="flex flex-col w-[460px] h-screen">
            <!-- 张耀武 -->
            <div class="flex flex-col items-center">
                <div class="flex justify-around items-center w-[460px] h-[60px]">
                    <div class="w-[100px] h-[24px] bg-[url('./static/logo.png')] "
                        style="background-size: 164px; background-position:left -1463px;">
                        style="background-size: 164px; background-position:left -1463px;">
                    </div>
                    <div class="rounded-2xl w-[300px] h-[30px] bg-gray-500">
                        <div class="flex justify-between items-center gap-2 p-2 w-[278px] h-[30px]">
                            <div class="w-[20px] h-[20px] bg-[url('./static/logo.png')]"
                                style="background-size:290px ;background-position: 183px top;">
                                style="background-size:290px ;background-position: 183px top;">
                            </div>
                            <input class="w-[258px] h-[30px] text-[14px] bg-gray-500" type="text" placeholder="搜索城市">
                        </div>
                    </div>
                </div>
                <div
                    class="flex items-center flex-col gap-3 w-[428px] h-[329px] rounded-2xl bg-gradient-to-r from-[#646872] to-[#7f879d]">
                <div
                    class="flex items-center flex-col gap-3 w-[428px] h-[329px] rounded-2xl bg-gradient-to-r from-[#646872] to-[#7f879d]">
                    <div class="flex justify-between items-center py-6 w-[388px] h-[21px]">
                        <div class="flex  justify-center items-center gap-2 w-[140px] h-[21px]">
                            <div class="w-[54px] h-[18px] text-[18px]  text-white">金水区</div>
                            <div class="py-1 w-[70px] h-[18px] text-[12px]  text-gray-300">河南省/中国</div>
                        </div>
                        <div class="py-1 w-[120px] h-[16px] text-[12px] text-gray-300">2025-09-02 14:24</div>
                    </div>
                    <div class="flex flex-col w-[388px] h-[102px]">
                        <div class="flex justify-end w-[370px] h-[24px]">
                            <div class="w-[76px] h-[24px] rounded-2xl bg-[#95b359] text-center text-white">AQI 优</div>
                        </div>
                        <div class="flex justify-center items-center w-[388px] h-[78px]">
                            <img class="w-[78px] h-[78px] float-left" src="./static/cloud.png" alt="">
                            <div class="float-right w-[70px] h-[78px]">
                                <div class="w-[59px] h-[44px] text-[38px] text-white text-left">30°</div>
                                <div class="w-[59px] h-[16px] text-[16px] text-white text-left">阴</div>
                            </div>
                        </div>
                    </div>
                    <div class="w-[388px] h-[48px] text-[15px] text-white text-center">
                        今天白天多云，夜晚有小雨，温度和昨天差不多，现在30°，空气不错。
                    </div>
                    <div class="flex justify-between px-4 items-center w-[388px] h-[70px] rounded-2xl bg-gray-500">
                        <div class="w-[60px] h-[38px]">
                            <div class="text-[16px] text-white">2级</div>
                            <div class="text-[15px] text-gray-300">东南风</div>
                        </div>
                        <div class="w-[80px] h-[38px]">
                            <div class="text-[16px] text-white">54%</div>
                            <div class="text-[15px] text-gray-300">相对湿度</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 李永嘉 -->
            <div>
                <div class="w-[428px] h-[346px] bg-gray-800 rounded-lg shadow-lg p-6 mx-auto">
                    <!-- 今天天气 -->

                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">今天</p>
                            <p class="text-sm text-gray-600">09月2日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/100.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>
                    <!-- 今天天气 -->

                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">今天</p>
                            <p class="text-sm text-gray-600">09月2日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/100.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>

                    <!-- 周三天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周三</p>
                            <p class="text-sm text-gray-600">09月3日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/101.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">26°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">22°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>

                    <!-- 周四天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周四</p>
                            <p class="text-sm text-gray-600">09月4日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/305.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>
                    <!-- 周四天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周四</p>
                            <p class="text-sm text-gray-600">09月4日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/305.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>

                    <!-- 周五天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周五</p>
                            <p class="text-sm text-gray-600">09月5日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/101.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>
                    <!-- 周五天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周五</p>
                            <p class="text-sm text-gray-600">09月5日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/101.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>

                    <!-- 周六天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周六</p>
                            <p class="text-sm text-gray-600">09月6日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/100.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>
                </div>
                <!-- 李昊昆 -->
                <div><button class="w-[460px] h-[156px] rounded-[23px] text-white bg-slate-400">
                        <h2>未来30天预报</h2>
                        <p>未来30天将有16天下雨，有1天温度超过35°，最高温36°（09月15日），最低温14°（09月29日，09月30日，10月01日）。</p>
                    </button>
                    <!-- 周六天气 -->
                    <div class="flex  items-start justify-around mb-6">
                        <div class="date">
                            <p class="font-medium text-white">周六</p>
                            <p class="text-sm text-gray-600">09月6日</p>
                        </div>
                        <img class="icon w-10 h-10" src="./static/jp/100.png" alt="晴">
                        <div class="tmp-line-bg flex items-center">
                            <div class="space w-1/4"></div>
                            <div class="tmp-cont flex items-center flex-1">
                                <span class="temp font-bold text-white">33°</span>
                                <div
                                    class=" h-1.5 w-[100px] rounded-lg bg-gradient-to-r from-[#F18360] to-[#427BFF] mx-2">
                                </div>
                                <span class="temp last font-bold text-white">25°</span>
                            </div>
                            <div class="space w-0"></div>
                        </div>
                    </div>
                </div>
                <!-- 李昊昆 -->
                <div><button class="w-[460px] h-[156px] rounded-[23px] text-white bg-slate-400">
                        <h2>未来30天预报</h2>
                        <p>未来30天将有16天下雨，有1天温度超过35°，最高温36°（09月15日），最低温14°（09月29日，09月30日，10月01日）。</p>
                    </button>

                    <button class="w-[460px] h-[180px] rounded-[23px] text-white bg-[url('index-cloud.png')]">
                    <button class="w-[460px] h-[180px] rounded-[23px] text-white bg-[url('index-cloud.png')]">

                        <div>
                            <h3>通过全球实时卫星云图</h3>
                            <p>
                                看看你头顶的云，飘到哪里去了
                            </p>
                        </div>
                        </a>
                </div>
                </button>
            </div>
                        <div>
                            <h3>通过全球实时卫星云图</h3>
                            <p>
                                看看你头顶的云，飘到哪里去了
                            </p>
                        </div>
                        </a>
                </div>
                </button>
            </div>
            <!-- 董知昊 -->
            <div class=" flex  w-[460px] h-[236px]">
                <div class="flex-col flex items-center  w-[209px] h-[236px]">
                    <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                        style="background-position: 5px -26px; background-size: 337px;"></div>
                    <h3 class="text-[#00000080] text-center">
                        优
                    </h3>
                    <p class="text-[#95b359] text-center">AAQ 22</p>
                </div>
                <div class="flex-col flex items-center  w-[209px] h-[236px]">
                    <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                        style="background-position: -95px -26px; background-size: 353px;"></div>
                    <h3 class="text-[#00000080] text-center">
                        全球预警数量
                    </h3>
                    <p class="text-[#f18360] text-center">437</p>
                </div>
            </div>



            <div class=" flex  w-[460px] h-[236px]">
                <div class="flex-col flex items-center  w-[209px] h-[236px]">
                    <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                        style="background-position: 5px -26px; background-size: 337px;"></div>
                    <h3 class="text-[#00000080] text-center">
                        优
                    </h3>
                    <p class="text-[#95b359] text-center">AAQ 22</p>
                </div>
                <div class="flex-col flex items-center  w-[209px] h-[236px]">
                    <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                        style="background-position: -95px -26px; background-size: 353px;"></div>
                    <h3 class="text-[#00000080] text-center">
                        全球预警数量
                    </h3>
                    <p class="text-[#f18360] text-center">437</p>
                </div>
            </div>



            <!-- 程方捷 -->
            <div class="flex flex-col">
                <!-- 和风天气APP部分 -->
                <div class="bg-blue-900 text-white p-8 flex items-center">
                    <div class="w-1/2 pr-8">
                        <h2 class="text-2xl font-bold mb-2">和风天气APP</h2>
                        <p class="text-blue-200">全球可视化天气应用</p>
                    </div>
                    <div class="w-1/2">
                        <img src="https://a.hecdn.net/sites/ws/3.5.8/images/index/index-app.png" alt="和风天气APP界面"
                            class="rounded">
                    </div>
                </div>

                <!-- 和风天气插件部分 -->
                <div class="bg-purple-900 text-white p-8 flex items-center">
                    <div class="w-1/2 pr-8">
                        <h2 class="text-2xl font-bold mb-2">和风天气插件</h2>
                        <p class="text-purple-200">想把和风天气的数据加入到你的产品中吗？</p>
                    </div>
                    <div class="w-1/2">
                        <img src="https://a.hecdn.net/sites/ws/3.5.8/images/index/index-plugin.png" alt="和风天气插件界面"
                            class="rounded">
                    </div>
                </div>
            </div>
            <!-- 王博 -->
            <div>
                <div class=" flex  w-[60px] h-[60px]">
                    <div class="flex-col flex items-center  w-[209px] h-[236px]">
                        <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                            style="background-position: 452px -311px; background-size: 450px;"></div>
                        <h3 class="text-[#00000080] text-center ">
                            天气预报
                        </h3>
                    </div>

                    <div class="flex-col flex items-center  w-[209px] h-[236px]">
                        <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                            style="background-position: -85px -320px; background-size: 450px;"></div>
                        <h3 class="text-[#00000080] text-center">
                            空气质量
                        </h3>
                    </div>

                    <div class="flex-col flex items-center  w-[209px] h-[236px]">
                        <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                            style="background-position: -170px -320px; background-size: 450px;"></div>
                        <h3 class="text-[#00000080] text-center">
                            灾害预警
                        </h3>
                    </div>

                    <div class="flex-col flex items-center  w-[209px] h-[236px]">
                        <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                            style="background-position: -260px -320px; background-size: 450px;"></div>
                        <h3 class="text-[#00000080] text-center">
                            天气地图
                        </h3>
                    </div>

                    <div class="flex-col flex items-center  w-[209px] h-[236px]">
                        <div class=" items-end h-[100px] w-[100px] bg-[url('/static/logo.png')] text-center"
                            style="background-position: -350px -320px; background-size: 450px;"></div>
                        <h3 class="text-[#00000080] text-center">
                            卫星和雷达
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右地图 黄文一 -->
        <div id="container" class="h-screen flex-1">
            <div class="flex justify-end text-[#ffffff] text-[14px] p-[20px] gap-4">
                <div class="flex justify-evenly items-center w-[392px] h-[30px] bg-[#3D4045] rounded-3xl  ">
                    <div>天气预报</div>
                    <div>商业气象</div>
                    <div>天气API</div>
                    <div class="flex justify-center items-center">
                        <div class="w-[20px] h-[20px] bg-[url('/static/logo.png')]"
                            style="background-size: 330px; background-position: -9px 0px;"></div>
                        <div class="w-[20px] h-[20px] bg-[url('/static/logo.png')]"
                            style="background-size: 330px; background-position: -9px 0px;"></div>
                        <button>下载APP</button>
                    </div>
                </div>

                <div class="flex justify-evenly items-center w-[171px] h-[30px] bg-[#3D4045] rounded-3xl ">
                    <div>语言</div>
                    <button>更多</button>
                </div>
            </div>

            <div class="flex justify-end p-[30px]">
                <div class="flex flex-col items-end w-[118px] h-[220px] text-[14px] gap-3">
                    <div class="flex justify-end items-center bg-[#FFFFFFB3] rounded-2xl w-[75px] h-[32px]">
                        <button>温度</button>
                        <div class="flex justify-center items-center rounded-3xl  bg-[#505257] w-[32px] h-[32px]">
                            <i class="fa fa-thermometer-half text-white"></i>
                        </div>
                    </div>
                    <div class="flex justify-end items-center bg-[#FFFFFFB3] rounded-2xl w-[103px] h-[32px]">
                        <button>相对湿度</button>
                        <div class="flex justify-center items-center rounded-3xl bg-[#505257] w-[32px] h-[32px]">
                            <i class="fa fa-tint text-white"></i>
                        </div>
                    </div>
                    <div class="flex justify-end items-center bg-[#FFFFFFB3] rounded-2xl w-[75px] h-[32px]">
                        <button>云量</button>
                        <div class="flex justify-center items-center rounded-3xl bg-[#505257] w-[32px] h-[32px]">
                            <i class="fa fa-cloud text-white"></i>
                            <i class="fa fa-cloud text-white"></i>
                        </div>
                    </div>
                    <div class="flex justify-end items-center bg-[#FFFFFFB3] rounded-2xl w-[103px] h-[32px]">
                        <button>海浪高度</button>
                        <div class="flex justify-center items-center rounded-3xl bg-[#505257] w-[32px] h-[32px]">
                            <i class="fa fa-water text-white"></i>
                        </div>
                    </div>
                    <div class="flex justify-end items-center bg-[#FFFFFFB3] rounded-2xl w-[103px] h-[32px]">
                        <button>更多图层</button>
                        <div class="flex justify-center items-center rounded-3xl bg-[#505257] w-[32px] h-[32px]">
                            <i class="fa fa-chevron-right text-white"></i>
                        </div>
                    </div>
                    <div class="flex justify-between items-center  bg-[#FFFFFFB3] rounded-2xl w-[103px] h-[32px]">
                        <label for="toggle" class="mr-3 text-sm font-medium text-gray-700"></label>
                        <input type="checkbox" id="toggle"
                            class="w-10 h-5 bg-gray-300 rounded-full appearance-none cursor-pointer transition duration-200 checked:bg-blue-500">
                        <input type="checkbox" id="toggle"
                            class="w-10 h-5 bg-gray-300 rounded-full appearance-none cursor-pointer transition duration-200 checked:bg-blue-500">
                        <div class=" flex justify-center items-center h-[32px]">风/海浪</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://map.qq.com/api/gljs?v=1.exp&key=RZ4BZ-DKT35-H3TII-IYFOX-X5COS-HLFJA"></script>
<script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //定义地图中心点坐标
        var center = new TMap.LatLng(39.984120, 116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
    }
    initMap();
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //定义地图中心点坐标
        var center = new TMap.LatLng(39.984120, 116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
    }
    initMap();
</script>

</html>
<!-- RZ4BZ-DKT35-H3TII-IYFOX-X5COS-HLFJA -->